<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.isFinish" @click="chengeIsfinishi(todo.todoId)"/>
            <!-- 如下代码也能实现功能，但是不太推荐，因为违法了Vue不建议修改props的原则 -->
            <!-- <input type="checkbox" v-modle="todo.isFinish"/> -->
            <span>{{todo.todoName}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.todoId)">删除</button>
    </li>
</template>

<script>
    export default {
        name:'TodoItem',
        //声明接收todo对象
        props:['todo','updateTodoStatus','deleteTodo'],
        methods:{
            //改变任务完成状态（当点击勾选框时）
            chengeIsfinishi(todoId){
                //通知App组件将对应的todo对象的isFinish值取反
                this.updateTodoStatus(todoId);
            },

            //删除一个任务（当选择删除某个任务时）
            handleDelete(todoId){
                //弹窗提示是否删除
                if(confirm('确定删除吗？')){
                    //通知App组件根据该方法传输的todoId删除任务
                    this.deleteTodo(todoId);
                }
            },
        }
    }
</script>

<style scoped>
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    li:hover {
        background-color: #ddd;
    }

    li:hover button {
        display: block;
    }
</style>